<template>
    <fieldset>
        <legend>父组件</legend>
        <h1>父组件</h1>
        <childCom ref="childRef" :gift="gift" @betMoney="handleBet"></childCom>
        <h1>{{ gift }}</h1>
        <h2>下注金额:{{ money }}</h2>
        <h2>余额:{{ balance }}</h2>
        <button @click="handleClick">点击修改gift</button>
    </fieldset>
</template>
<script setup>
import childCom from "./child.vue"
//何时使用响应式api?一个核心,就是这个变量需不需要放到模板中展示,如果要放到模板中使用那就需要使用响应式api来展示

//ref是包装的概念

//模板中使用ref会自动解包

import { ref, onMounted } from "vue"

let gift = ref('初始值')

let handleClick = () => {
    gift.value = '阿根廷'
}

// 下注金额
let money = ref(0)

let handleBet = (input) => {
    console.log(input)
    money.value = input
}

//ref引用组件

let childRef = ref(null)

// console.log(childRef)

// let { balance } = childRef.value

let balance = ref();

onMounted(() => {
    balance.value = childRef.value.balance
    // console.log(childRef.value.balance)
})

</script>